<template>
  <div class="gl_contentBox gl_heightFull">
    <div v-if="flag" class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>搜索教练</p>
          <el-input v-model="Filter" size="mini" placeholder="请输入教练名称" clearable @change="getcoachList()" />
        </el-col>
        <el-col :span="4">
          <p>状态</p>
          <el-select v-model="CanTeach" size="mini" @change="getcoachList()">
            <el-option value="" label="全部" />
            <el-option value="true" label="已授课" />
            <el-option value="false" label="未授课" />
          </el-select>
        </el-col>
        <!-- <el-col :span="5.5">
          <p>上课日期</p>
          <el-date-picker v-model="freeDay" type="daterange" range-separator="至" start-placeholder="请选择日期" end-placeholder="请选择日期" size="mini" value-format="yyyy-MM-dd" style="width:100%" />
        </el-col> -->
        <el-col :span="2.5">
          <el-button type="primary" style="margin-top:25px" size="mini" @click="getcoachList()">筛选</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="warning" style="margin-top:25px" size="mini" :loading="btnDownLoading" @click="exportstudent()">导出报表</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="flag" style="margin-top:20px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="100" />
        <el-table-column label="教练姓名" prop="name" />
        <el-table-column label="手机号" prop="phoneNumber" />
        <el-table-column label="已排课" prop="courseScheduleCount" align="center" />
        <el-table-column label="已上课数" prop="startedCourseScheduleCount" align="center" />
        <el-table-column label="销课数量" prop="courseCount" align="center" />
        <el-table-column label="授课状态">
          <template slot-scope="{ row }">
            {{ row.canTeach === true ? '已授课' : '未授课' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" style="color:#1990FF" @click="check(row)">详情</el-button>
            <el-button v-if="row.canTeach === true" type="text" size="mini" style="color:#1990FF" @click="stopTeacher(row.id)">关闭授课</el-button>
            <el-button v-if="row.canTeach === false" type="text" size="mini" style="color:#1990FF" @click="openTeacher(row.id)">开启授课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="gl_pt_20" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCoachQO.Page"
        :page-size="Api_GET_ClubCoachQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { api_GET_ClubCoach, api_PUT_ClubCoachIdCanTeachStatus } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCoachQO, Api_PUT_ClubCoachIdCanTeachStatusQO } from '@/lib/form/hall/swaggerForm';
import { mapActions } from 'vuex';
export default {
  data() {
    return {
      btnDownLoading: false,
      GetStudentInput: {},
      CanTeach: '',
      tableLoading: false,
      currentPage: 1,
      Filter: '',
      freeDay: [],
      totalPage: 0,
      Api_PUT_ClubCoachIdCanTeachStatusQO: new Api_PUT_ClubCoachIdCanTeachStatusQO(),
      Api_GET_ClubCoachQO: new Api_GET_ClubCoachQO(),
      paymentTime: [],
      flag: true,
      tableData: [
        {

        }
      ]
    };
  },
  watch: {
    freeDay: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length !== 0) {
          this.changeProportion(val);
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getcoachList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    check(row) {
      console.log(row);
      this.$router.push({ name: 'CoachType', query: { 'id': row.id, 'name': row.name, 'canTeach': row.canTeach }});
    },
    // 获取时间
    changeProportion(val) {
      this.Api_GET_ClubCoachQO.StartDateTime = val[0];
      this.Api_GET_ClubCoachQO.EndDateTime = val[1];
      this.GetStudentInput.StartDateTime = val[0];
      this.GetStudentInput.EndDateTime = val[1];
      this.getcoachList();
    },
    // 获取教练列表
    getcoachList(page) {
      this.Api_GET_ClubCoachQO.IsEnabled = '';
      this.Api_GET_ClubCoachQO.CanTeach = this.CanTeach;
      this.tableLoading = true;
      this.Api_GET_ClubCoachQO.Filter = this.Filter;
      this.Api_GET_ClubCoachQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubCoachQO.Page = page || 1;
      this.Api_GET_ClubCoachQO.SkipCount = (this.Api_GET_ClubCoachQO.Page - 1) * this.Api_GET_ClubCoachQO.MaxResultCount;
      console.log(this.Api_GET_ClubCoachQO);
      api_GET_ClubCoach(this.Api_GET_ClubCoachQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      });
    },
    // 关闭授课
    stopTeacher(id) {
      this.Api_PUT_ClubCoachIdCanTeachStatusQO.canTeach = false;
      api_PUT_ClubCoachIdCanTeachStatus(id, this.Api_PUT_ClubCoachIdCanTeachStatusQO).then(res => {
        this.$message({
          message: '关闭成功',
          type: 'success'
        });
        this.getcoachList();
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 开启授课
    openTeacher(id) {
      console.log(id);
      this.Api_PUT_ClubCoachIdCanTeachStatusQO.canTeach = true;
      api_PUT_ClubCoachIdCanTeachStatus(id, this.Api_PUT_ClubCoachIdCanTeachStatusQO).then(res => {
        this.$message({
          message: '开启成功',
          type: 'success'
        });
        this.getcoachList();
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCoachQO.MaxResultCount = MaxResultCount;
      this.getcoachList();
    },
    pageIndexChange(currentPage) {
      this.getcoachList(currentPage);
    },
    exportstudent() {
      this.GetStudentInput.IsEnabled = '';
      this.GetStudentInput.Sorting = 'creationTime DESC';
      this.GetStudentInput.CanTeach = this.CanTeach;
      this.GetStudentInput.Filter = this.Filter;
      this.GetStudentInput.Page = this.Api_GET_ClubCoachQO.Page;
      this.GetStudentInput = JSON.stringify(this.GetStudentInput);
      var that = this;
      this.btnDownLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '教练' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'Coach', GetCoachesInput: this.GetStudentInput }, WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE).then(res => {
        this.btnDownLoading = false;
        this.GetStudentInput = {};
      }).catch(error => {
        this.GetStudentInput = {};
        this.btnDownLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }
};
</script>

<style>

</style>
